﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tuding布局演示</title>
<link href="../css/hybrid.css" rel="stylesheet" type="text/css" />
<style type="text/css">
span {
	display:block;
	border:1px solid #666666;
	overflow:hidden;
	text-align:center;
	background:#F1F1F1;
	font-weight: bold;
}
.ming span {
	background:#882D71 url(../img/grid.png) -1px 0 repeat;
	color:#000000;
}
.n1 span {
	background:#E673C9 url(../img/grid.png) -1px 0 repeat;
	color:#000000;
}
.n2 span {
	background:#F2B6E3 url(../img/grid.png) -1px 0 repeat;
	color:#882D71;
}
.wrapping {
	padding:1px 0;
}
</style>
</head>
<body class="hybrid">
<h1>Tuding布局L模式演示</h1>
<hr />
<div id="bbody">
  <div class="wrapping m">
    <div class="filling">
      <div class="ming"><span>m-default</span></div>
    </div>
  </div>
  <hr />
  <div class="wrapping mn">
    <div class="filling">
      <div class="ming"><span>m-default</span></div>
      <div class="ning n1"><span>n-default</span></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nm">
    <div class="filling">
      <div class="ming"><span>m-default</span></div>
      <div class="ning n1"><span>n-default</span></div>
    </div>
  </div>
  <hr />
  <div class="wrapping mnn">
    <div class="filling">
      <div class="ming"><span>m-default</span></div>
      <div class="ning n1"><span>n1-default</span></div>
      <div class="ning n2"><span>n2-default</span></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nmn">
    <div class="filling">
      <div class="ming"><span>m-default</span></div>
      <div class="ning n1"><span>n1-default</span></div>
      <div class="ning n2"><span>n2-default</span></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nnm">
    <div class="filling">
      <div class="ming"><span>m-default</span></div>
      <div class="ning n1"><span>n1-default</span></div>
      <div class="ning n2"><span>n2-default</span></div>
    </div>
  </div>
</div>
<hr />
<h1>Tuding布局T模式演示</h1>
<hr />
<div id="bbody">
  <div class="wrapping m">
    <div class="filling">
      <div class="ming"><span>m-default</span></div>
    </div>
  </div>
  <hr />
  <div class="wrapping mn">
    <div class="filling">
      <div class="ning n1"><span>n-default</span></div>
      <div class="ming"><span>m-default</span></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nm">
    <div class="filling">
      <div class="ning n1"><span>n-default</span></div>
      <div class="ming"><span>m-default</span></div>
    </div>
  </div>
  <hr />
  <div class="wrapping mnn">
    <div class="filling">
      <div class="ning n1"><span>n1-default</span></div>
      <div class="ming"><span>m-default</span></div>
      <div class="ning n2"><span>n2-default</span></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nmn">
    <div class="filling">
      <div class="ning n1"><span>n1-default</span></div>
      <div class="ming"><span>m-default</span></div>
      <div class="ning n2"><span>n2-default</span></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nnm">
    <div class="filling">
      <div class="ning n1"><span>n1-default</span></div>
      <div class="ming"><span>m-default</span></div>
      <div class="ning n2"><span>n2-default</span></div>
    </div>
  </div>
</div>
<hr />
<div id="colophon">
  <address>
  <a href="http://www.bubujie.com/" target="_blank" class="logo"><img src="../img/logo_16px.gif" width="48" height="20" alt="步步街"></a> <em>Copyright ©</em> <a href="http://www.bubujie.com/" target="_blank">步步街银川网络商城</a> All Rights Reserved.
  </address>
</div>
</body>
</html>
